<template>
  <view class="payment-result-page">
    <!-- 支付结果 -->
    <view class="result-card">
      <view class="result-icon">
        <u-icon 
          :name="resultIcon" 
          :color="resultColor" 
          size="80"
        ></u-icon>
      </view>
      <view class="result-title">{{ resultTitle }}</view>
      <view class="result-desc">{{ resultDesc }}</view>
    </view>

    <!-- 支付详情 -->
    <view class="detail-card">
      <u-card title="支付详情" :border="false">
        <view class="detail-item">
          <text class="detail-label">订单号：</text>
          <text class="detail-value">{{ paymentDetail.orderNo }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">支付金额：</text>
          <text class="detail-amount">¥{{ paymentDetail.amount }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">支付方式：</text>
          <text class="detail-value">{{ paymentDetail.paymentMethod }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">支付时间：</text>
          <text class="detail-value">{{ paymentDetail.paymentTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">费用类型：</text>
          <text class="detail-value">{{ paymentDetail.feeType }}</text>
        </view>
      </u-card>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <u-button 
        v-if="paymentStatus === 'success'"
        type="primary" 
        text="查看发票"
        @click="viewInvoice"
        size="large"
      ></u-button>
      <u-button 
        type="default" 
        text="返回首页"
        @click="goHome"
        size="large"
      ></u-button>
      <u-button 
        v-if="paymentStatus === 'failed'"
        type="warning" 
        text="重新支付"
        @click="retryPayment"
        size="large"
      ></u-button>
    </view>

    <!-- 温馨提示 -->
    <view class="tips-card">
      <u-card title="温馨提示" :border="false">
        <view class="tips-list">
          <view class="tip-item">
            <u-icon name="info-circle" color="#2d8cf0" size="16"></u-icon>
            <text class="tip-text">支付成功后，系统将自动生成电子发票</text>
          </view>
          <view class="tip-item">
            <u-icon name="info-circle" color="#2d8cf0" size="16"></u-icon>
            <text class="tip-text">如有疑问，请联系物业客服：400-123-4567</text>
          </view>
          <view class="tip-item">
            <u-icon name="info-circle" color="#2d8cf0" size="16"></u-icon>
            <text class="tip-text">感谢您对智慧社区的支持</text>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script setup>
/**
 * 支付结果页面
 * @author Wu.Liang
 * @date 2025-01-27
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 支付状态
const paymentStatus = ref('success')

// 支付详情
const paymentDetail = reactive({
  orderNo: 'PAY202501270001',
  amount: '1,230.00',
  paymentMethod: '微信支付',
  paymentTime: '2025-01-27 15:30:25',
  feeType: '物业费'
})

// 计算结果显示
const resultIcon = computed(() => {
  return paymentStatus.value === 'success' ? 'checkmark-circle' : 'close-circle'
})

const resultColor = computed(() => {
  return paymentStatus.value === 'success' ? '#2ed573' : '#ff4757'
})

const resultTitle = computed(() => {
  return paymentStatus.value === 'success' ? '支付成功' : '支付失败'
})

const resultDesc = computed(() => {
  return paymentStatus.value === 'success' 
    ? '您的费用已成功缴纳，感谢您的配合！' 
    : '支付过程中遇到问题，请重新尝试或联系客服。'
})

// 查看发票
const viewInvoice = () => {
  uni.navigateTo({
    url: `/pages/payment/invoice?orderNo=${paymentDetail.orderNo}`
  })
}

// 返回首页
const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 重新支付
const retryPayment = () => {
  uni.navigateBack()
}

// 页面加载时初始化数据
onMounted(() => {
  console.log('支付结果页面加载完成')
  
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.status) {
    paymentStatus.value = options.status
  }
  
  // 根据支付状态设置不同的详情信息
  if (paymentStatus.value === 'failed') {
    paymentDetail.paymentMethod = '支付失败'
    paymentDetail.paymentTime = '--'
  }
})
</script>

<style lang="scss" scoped>
.payment-result-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .result-icon {
    margin-bottom: 20px;
  }
  
  .result-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
  }
  
  .result-desc {
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.5;
  }
}

.detail-card {
  margin-bottom: 20px;
  
  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      font-size: 14px;
      color: #666;
    }
    
    .detail-value {
      font-size: 14px;
      color: #333;
    }
    
    .detail-amount {
      font-size: 16px;
      font-weight: bold;
      color: #ff4757;
    }
  }
}

.action-buttons {
  margin-bottom: 20px;
  
  .u-button {
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.tips-card {
  .tips-list {
    .tip-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .tip-text {
        margin-left: 8px;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        flex: 1;
      }
    }
  }
}
</style> 